<!--已上架岗位列表-->
<template>
  <div style="width: 100vw ;background-color: #f7f9ff;padding: 20px">
    <div class="search-container">
      <el-input
          v-model="searchQuery"
          placeholder="请输入职位、公司或关键词"
          clearable
          @clear="handleClear"
          @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
    </div>
    <div style="width: 60%;margin:  0 auto;background-color: #f7f9ff;text-align: left">
      <div v-for="i in 5" class="property-item">
        <div style="margin: 3px 20px">房地产/物业类</div>
        <span style="color: #888888;margin: 3px 20px">
          <el-link underline="hover" style="color:#888888;">房地产开发/策划专员</el-link> |
          <el-link underline="hover" style="color:#888888;">房地产/物业类</el-link> |
          <el-link underline="hover" style="color:#888888;">房地产/物业类</el-link> |
        </span>
      </div>
      <div class="property-item">
        <div style="text-align: center" @click="">清除筛选条件</div>
      </div>
    </div>
<!--    <div style="">-->
      <el-card class="company-card" style="margin: 20px auto" v-for="item in companyInfo">
        <div class="card-header">
          <img class="logo" src="/imgs/company/img.png" alt="公司Logo" />
          <div class="company-info">
            <h2 class="company-name">{{ item.companyName }}</h2>
            <br>
            <p class="company-details">
              1000-9999 · {{ item.industry }} · 私营企业
            </p>
            <br>
            <p class="company-location">{{ item.address }}</p>
          </div>
          <div class="job-count">
            <span>23</span>
            <span>在招职位</span>
          </div>
        </div>
        <div class="card-footer">
          <span class="publish-date"><el-tag type="primary">{{item.createTime}}</el-tag> 发布日期</span>
          <el-button type="text" class="view-button" @click="showCompanyInfo(item.id)">查看</el-button>
        </div>
      </el-card>
<!--    </div>-->

     <div style="margin: 0 auto;width: 57%;">
      <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
      />
    </div>
  </div>

</template>
<script setup>
import { House, User ,Iphone,Search } from '@element-plus/icons-vue'
import {onMounted, ref} from "vue"
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";
import store from "@/store";
const emit = defineEmits(['']);

const handleSearch = () => {
  emit('search', searchQuery.value);
};

const handleClear = () => {
  emit('search', '');
};
const companyInfo=ref([])

  const searchQuery=ref(
      {
        jobName: '',
        companyName: '',
      }
  )
const loadCompanyList = () => {
  let data=qs.stringify(searchQuery.value)
  axios.get('http://localhost:9091/v1/company/select',{
    params: searchQuery.value  // 正确传递查询参数
  })
      .then(response=>{
        companyInfo.value=response.data;
        console.log('companylist', companyInfo.value);

      })

  console.log("搜索");
};
//传递企业id筛选对应企业信息
const showCompanyInfo=(companyId)=>{
  const companyData=companyInfo.value.find(item=>item.id===companyId)
  if (companyData){
    store.commit('SET_COMPANYINFO_DATA', companyData);
    console.log('数据已保存到 Vuex:', store.state.companyData);
    router.push('/companyInfo')
  }

}
onMounted(()=>{
  loadCompanyList();
})
const addInterest = () => {
  console.log("添加收藏");
};
</script>

<style scoped>
.property-item {
  width: 100%;
  background-color: #ffffff;
  margin: 2px auto;
  box-shadow: 5px 5px 10px 0 rgba(232, 255, 254, 0.3);
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.property-item:hover {
  box-shadow: 0 0 15px rgba(232, 255, 254, 0.3); /* 绿色调的阴影 */
  transform: translateY(-1px); /* 可选：轻微上浮效果 */
}
.search-container {
  max-width: 800px;

  margin: 20px auto;
}

:deep(.el-input ){
  border-radius: 20px;
  overflow: hidden;
}

:deep(.el-input-group__append) {
  background-color: var(--el-color-primary);
  color: white;
  border: none;
  cursor: pointer;
}

:deep(.el-input-group__append:hover) {
  background-color: var(--el-color-primary-light-3);
}
.company-card {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 16px;
}

.logo {
  width: 100px; /* 调整图片宽度 */
  margin-right: 16px; /* 图片与信息之间的间距 */
}

.company-info {
  text-align: left;
  flex: 1; /* 使公司信息区域占据剩余空间 */
}

.company-name {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.company-details,
.company-location {
  margin: 4px 0 0;
  font-size: 14px;
  color: #999;
}

.job-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto; /* 将在招职位信息靠右对齐 */
}

.job-count span:first-child {
  font-size: 24px;
  color: #666;
}

.job-count span:last-child {
  font-size: 12px;
  color: #999;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid #f0f0f0;
}

.publish-date {
  font-size: 14px;
  color: #666;
}

.view-button {
  font-size: 14px;
  color: #409eff;
}
.property-item {
  width: 100%;
  background-color: #ffffff;
  margin: 2px auto;
  padding: 10px;
  box-shadow: 5px 5px 10px 0 rgba(232, 255, 254, 0.3);
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.property-item:hover {
  box-shadow: 0 0 15px rgba(232, 255, 254, 0.3); /* 绿色调的阴影 */
  transform: translateY(-1px); /* 可选：轻微上浮效果 */
}
</style>